<template>
  <!-- 骨架屏封装 -->
  <div class="skeleton" v-show="skeletonFlag? true : false">
    <wux-skeleton active>
      <wux-skeleton-paragraph rows="4" />
    </wux-skeleton>
    <view class="sub-title"></view>
    <wux-skeleton active>
      <wux-row>
        <wux-col span="2">
          <wux-skeleton-avatar />
        </wux-col>
        <wux-col span="10">
          <wux-skeleton-paragraph />
        </wux-col>
      </wux-row>
    </wux-skeleton>
    <view class="sub-title"></view>
    <wux-skeleton active>
      <wux-row>
        <wux-col span="2">
          <wux-skeleton-avatar />
        </wux-col>
        <wux-col span="10">
          <wux-skeleton-paragraph />
        </wux-col>
      </wux-row>
    </wux-skeleton>
    <view class="sub-title"></view>
    <wux-skeleton active>
      <wux-row>
        <wux-col span="2">
          <wux-skeleton-avatar />
        </wux-col>
        <wux-col span="10">
          <wux-skeleton-paragraph />
        </wux-col>
      </wux-row>
    </wux-skeleton>
    <view class="sub-title"></view>
    <wux-skeleton active>
      <wux-row>
        <wux-col span="2">
          <wux-skeleton-avatar />
        </wux-col>
        <wux-col span="10">
          <wux-skeleton-paragraph />
        </wux-col>
      </wux-row>
    </wux-skeleton>
    <view class="sub-title"></view>
    <wux-skeleton active>
      <wux-row>
        <wux-col span="2">
          <wux-skeleton-avatar />
        </wux-col>
        <wux-col span="10">
          <wux-skeleton-paragraph />
        </wux-col>
      </wux-row>
    </wux-skeleton>
  </div>
</template>

<script>
export default {
  props: ['skeletonFlag'] // 接收外部传入的数据
}
</script>

<style>
/* 骨架屏样式 */
.skeleton {
  position:fixed;
  top:0;
  left:0;
  padding-top: 30rpx;
  width: 100%;
  background-color: #000;
  z-index: 99999;
}
.sub-title {
  margin: 50rpx;
}
</style>
